<template>
  <!-- {{ volunteerInfos }} -->
  <div>
    <VueDraggable
      ref="el"
      v-model="volunteerInfos"
      :animation="150"
      ghostClass="ghost"
      class="flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      @end="draggableEnd"
    >
      <div
        class="schoolList"
        v-for="(data, index) in volunteerInfos"
        :key="data.id"
      >
        <div class="flex">
          <!-- 排名咧 -->
          <div v-if="false" class="schoolList-sequence">
            <el-popover placement="bottom-start" :width="200" trigger="hover">
              <template #reference>
                <el-button style="font-size: 18px" link
                  >{{ index + 1 }}&nbsp;
                  <el-icon size="12" color="#86909c">
                    <ArrowDownBold />
                  </el-icon>
                </el-button>
              </template>
              <div class="curr between">
                <div>第</div>
                <el-input
                  v-model="data.inputNum"
                  style="width: 52px"
                  placeholder="N"
                  @input="handleInput(data)"
                ></el-input>
                <div>志愿</div>
                <el-button
                  color="#165dff"
                  :disabled="!(data.inputNum > 0)"
                  @click="onClickInputChange(data.inputNum, index)"
                  >确定</el-button
                >
              </div>
            </el-popover>
          </div>
          <!-- 录取概率列 -->
          <div class="schoolList-Left" v-if="false">
            <!-- <h1 v-show="showChancelv">{{ data.chance }}%</h1> -->
            <div v-if="data.isNewly">
              <h1 style="font-size: 24px">新增</h1>
            </div>
            <div v-else>
              <span
                v-show="showChancelv"
                style="cursor: pointer; width: fit-content"
                :class="{ disableUni: disableUniversityInfo }"
                @click="universityInfo(data, false)"
                ><span class="schoolList-Left-chance">{{ data.chance }}</span
                >%</span
              >
              <div class="schoolList-Left-size">
                {{ data.probabilityExplain }}
              </div>
            </div>

            <div
              :class="
                data.chance_lv == 1
                  ? 'chance1'
                  : data.chance_lv == 2
                    ? 'chance2'
                    : 'chance3'
              "
              class="schoolList-Left-number"
            >
              {{
                data.chance_lv == 1 ? '冲' : data.chance_lv == 2 ? '稳' : '保'
              }}
            </div>
          </div>
          <!-- 院校列 -->
          <div class="schoolList-Center" style="flex: 1 1 0%">
            <div class="schoolName curr" @click="handleScoolNameClick(data)">
              {{ data?.collegeRealName || data?.collegeName }}
            </div>
            <div class="schoolList-size">
              {{ data.collegeRemark }}
            </div>
            <div class="schoolList-size">
              <p>
                代码: {{ data.collegeEnrollCode
                }}{{ data.groupCode ? ` 专业组代码 ${data.groupCode}` : '' }} |
                {{ data?.features?.join(' / ') }} |
                {{
                  data.provinceName +
                  ' / ' +
                  data?.cityName +
                  ' / ' +
                  natureTypeFun(data?.natureType, data) +
                  ' / ' +
                  noData(data?.categories?.join(' / ')) +
                  '排名' +
                  (data?.rank > 0 ? data?.rank : '-')
                }}
              </p>
            </div>
          </div>
          <!-- 招生计划列 -->
          <div class="schoolList-people" style="width: 128px">
            <h1 style="font-size: 30px">
              {{ data.planNum }}<span style="font-size: 12px">人</span>
            </h1>
            <div class="schoolList-title">{{ data.chooseSubjectText }}</div>
          </div>
          <!-- 历年咧 -->
          <div class="schoolList-grade" style="width: 330px">
            <div class="schoolList-grade-left" style="width: 25%">
              <div class="schoolList-grade-size">录取人数</div>
              <div class="schoolList-grade-size">线差</div>
              <div class="schoolList-grade-size">最低分</div>
              <div class="schoolList-grade-size">最低位次</div>
              <div
                v-if="false"
                class="schoolList-grade-size schoolList-grade-size-icon"
              >
                <span>等效位差</span>
                <el-tooltip placement="top">
                  <template #content>
                    什么是等效位差？
                    <br />
                    历年等效位差根据考生历年的等效位-历年位次的差值得出，
                    <br />
                    换算后的等效位差可更精准的与历年位次进行比较。
                  </template>
                  <QuestionFilled style="width: 12px; margin-left: 8px" />
                </el-tooltip>
              </div>
            </div>
            <div v-for="(moreItem, index) in data.moreYear" style="width: 25%">
              <div class="schoolList-grade-left">
                <div class="schoolList-grade-size-number alitem">
                  {{ moreItem.enterNum }}
                </div>
                <div class="schoolList-grade-size-number alitem">
                  {{ moreItem.lineDiff || '-' }}
                </div>
                <div class="schoolList-grade-size-number alitem">
                  {{ moreItem.minScore }}
                  <div
                    v-if="
                      (moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                      moreItem.zjText == '有征集'
                    "
                    style="background-color: #fbc7c2; color: red"
                  >
                    征
                  </div>
                </div>
                <div class="schoolList-grade-size-number alitem">
                  {{ moreItem.minRank }}
                </div>
                <div
                  v-if="false"
                  class="schoolList-grade-size-number alitem items"
                >
                  <span
                    v-if="
                      moreItem.equivalentBitDifference == '-' ||
                      !moreItem.equivalentBitDifference
                    "
                  >
                    -
                  </span>
                  <span
                    v-else-if="moreItem.equivalentBitDifference < 0"
                    style="color: #ff7d00"
                  >
                    低{{
                      moreItem.equivalentBitDifference.toString().substring(1)
                    }}</span
                  >
                  <span
                    v-else-if="moreItem.equivalentBitDifference >= 0"
                    style="color: #00b56a"
                  >
                    高{{ moreItem.equivalentBitDifference }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            style="width: 180px; padding: 40px; cursor: pointer"
            class="cloum alitem"
            v-if="!allMajor"
          >
            <div class="alitem center" v-if="status != 0">
              <el-icon
                size="20"
                style="margin-right: 20px"
                color="#2990f9"
                class="curr"
              >
                <Rank />
              </el-icon>
              <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                icon-color="#626AEF"
                title="确认删除"
                @confirm="onClickDeleteCollege(index)"
              >
                <template #reference>
                  <el-icon size="20" color="#2990f9">
                    <Delete />
                  </el-icon>
                </template>
              </el-popconfirm>
            </div>

            <div
              style="
                display: flex;
                font-size: 14px;
                margin-top: 10px;
                justify-content: center;
              "
              @click="onClickShowMajors(data, index)"
            >
              <span>
                <span>专业</span>
                {{ data.majorsInfo.length }} &nbsp;
              </span>
              <el-icon size="20">
                <ArrowDown v-if="!isShowMajors(data)" />
                <ArrowUp v-else />
              </el-icon>
            </div>
          </div>
          <div
            style="width: 180px; padding: 40px; cursor: pointer"
            v-if="allMajor"
          >
            <div>
              <div
                :style="{
                  color: data.isFit == 0 ? '#ccc !important' : '',
                  border: data.isFit == 0 ? '1px solid #ccc !important' : '',
                }"
                class="schoolList-look-button alitem"
                :class="
                  getFilledCollegeIndex(data) >= 0 ? 'zyb-fill' : 'zyb-notfill'
                "
                @click="onClickShowMajors(data, index)"
              >
                专业
                {{
                  data.majorsNum ? data.majorsNum : newList[index]?.majorsNum
                }}
                <el-icon size="20">
                  <ArrowDown v-if="!isShowMajors(data)" />
                  <ArrowUp v-else />
                </el-icon>
              </div>
              <div
                style="
                  text-align: center;
                  font-size: 12px;
                  margin-top: 10px;
                  color: red;
                "
                v-if="data.isFit == 0"
              >
                选科不符
              </div>
              <div
                style="text-align: center"
                v-if="getFilledCollegeIndex(data) >= 0"
              >
                已填{{ getFilledMajorNum(data) }}
              </div>
            </div>
          </div>
        </div>

        <VueDraggable
          ref="el"
          v-model="data.majorsInfo"
          :animation="150"
          ghostClass="ghost"
          class="flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
          :disabled="allMajor"
        >
          <div
            v-if="isShowMajors(data)"
            style="
              width: 100%;
              background-color: #fafbfe;
              display: flex;
              border-bottom: 1px solid #e5e6eb;
            "
            v-for="(major, idx) in allMajor
              ? data.allMajorsList
              : data.majorsInfo"
            :key="major.id"
          >
            <div v-if="false" class="schoolList-sequence"></div>
            <div v-if="false" class="schoolList-Left">
              <div v-if="data.isNewly">
                <h1 style="font-size: 24px">新增</h1>
              </div>
              <div v-else>
                <span
                  style="cursor: pointer; width: fit-content"
                  :class="{ disableUni: disableUniversityInfo }"
                  @click="universityInfo(major, true)"
                  ><span style="font-size: 30px">{{ major.chance }}</span>
                  %</span
                >
                <div class="schoolList-Left-size">
                  {{ major.probabilityExplain }}
                </div>
              </div>
            </div>
            <div
              class="schoolList-Center curr"
              style="flex: 1 1 0%"
              @click="handleMajor(major)"
            >
              <div class="schoolName-size">{{ major.professionName }}</div>
              <div class="schoolList-size">
                {{ major.remarkExt }}
              </div>
              <div class="schoolList-size">
                <div>
                  代码:
                  {{
                    major.professionEnrollCode
                      ? major.professionEnrollCode
                      : '-'
                  }}
                  <span v-if="!!major.mseLevel"> | </span>
                  <span v-if="!!major.mseLevel" class="mseLevel">{{
                    major.mseLevel
                  }}</span>
                </div>
              </div>
            </div>
            <div class="schoolList-people" style="width: 128px">
              <div class="schoolList-Number" style="font-size: 30px">
                {{ major.planNum ? major.planNum : '-'
                }}<span style="font-size: 12px">人</span>
              </div>
              <div class="schoolList-title">
                {{ major.chooseSubjectText ? major.chooseSubjectText : '' }}
              </div>
              <div style="margin-top: 10px; color: #86909c; font-size: 12px">
                <div v-if="major.learnYear || major.cost != 0">
                  <span>{{ major.learnYear }}年 &nbsp; </span
                  ><span>￥{{ major.cost }}</span>
                </div>
              </div>
            </div>
            <div class="schoolList-grade" style="width: 330px">
              <div class="schoolList-grade-left" style="width: 25%">
                <div class="schoolList-grade-size">录取人数</div>
                <div class="schoolList-grade-size">线差</div>
                <div class="schoolList-grade-size">最低分</div>
                <div class="schoolList-grade-size">最低位次</div>
                <div
                  v-if="false"
                  class="schoolList-grade-size schoolList-grade-size-icon"
                >
                  <span>等效位差</span>
                  <el-tooltip placement="top">
                    <template #content>
                      什么是等效位差？
                      <br />
                      历年等效位差根据考生历年的等效位-历年位次的差值得出，
                      <br />
                      换算后的等效位差可更精准的与历年位次进行比较。
                    </template>
                    <QuestionFilled style="width: 12px; margin-left: 8px" />
                  </el-tooltip>
                </div>
              </div>
              <div
                v-for="(moreItem, index) in major.moreYear"
                style="width: 25%"
              >
                <div class="schoolList-grade-left">
                  <div class="schoolList-grade-size-number alitem">
                    {{ moreItem.enterNum }}
                  </div>
                  <div class="schoolList-grade-size-number alitem">
                    {{ moreItem.lineDiff || '-' }}
                  </div>
                  <div class="schoolList-grade-size-number alitem">
                    {{ moreItem.minScore }}
                    <div
                      v-if="
                        (moreItem.zjText * 1 > 0 &&
                          moreItem.minScore * 1 > 0) ||
                        moreItem.zjText == '有征集'
                      "
                      style="background-color: #fbc7c2; color: red"
                    >
                      征
                    </div>
                  </div>
                  <div class="schoolList-grade-size-number alitem">
                    {{ moreItem.minRank }}
                  </div>
                  <div
                    v-if="false"
                    class="schoolList-grade-size-number alitem items"
                  >
                    <span
                      v-if="
                        moreItem.equivalentBitDifference == '-' ||
                        !moreItem.equivalentBitDifference
                      "
                    >
                      -
                    </span>
                    <span
                      v-else-if="moreItem.equivalentBitDifference < 0"
                      style="color: #ff7d00"
                    >
                      低{{
                        moreItem.equivalentBitDifference.toString().substring(1)
                      }}</span
                    >
                    <span
                      v-else-if="moreItem.equivalentBitDifference >= 0"
                      style="color: #00b56a"
                    >
                      高{{ moreItem.equivalentBitDifference }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div
              style="width: 180px; padding: 40px; cursor: pointer"
              class="alitem center"
              v-if="!allMajor"
            >
              <div style="width: 53%" class="between" v-if="status != 0">
                <el-icon
                  size="20"
                  color="#2990f9"
                  style="margin-right: 20px"
                  class="curr"
                >
                  <Rank />
                </el-icon>
                <el-icon
                  size="20"
                  color="#2990f9"
                  @click="onClickDeleteMajor(index, idx)"
                >
                  <Delete />
                </el-icon>
              </div>
            </div>

            <div
              style="
                width: 180px;
                padding: 40px;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
              class="center alitem"
              v-if="allMajor"
            >
              <div
                class="schoolList-look-button alitem"
                :style="{
                  color: data.isFit == 0 ? '#ccc !important' : '',
                  border: data.isFit == 0 ? '1px solid #ccc !important' : '',
                }"
                style="width: 60px"
                :class="getFilledMajorIndex(data, major) > 0 ? 'select' : ''"
                @click="onClickTianbao(data, major)"
              >
                {{
                  getFilledMajorIndex(data, major) > 0
                    ? '已填' + getFilledMajorIndex(data, major)
                    : '填报'
                }}
              </div>
              <span
                v-if="data.majorEnrollTypesLable"
                style="font-size: 14px; color: #ff7d00"
                >{{ data.majorEnrollTypesLable }}</span
              >
            </div>
          </div>
        </VueDraggable>
      </div>
    </VueDraggable>
    <Drawertool ref="drawertoolRef" />
  </div>
</template>
<script setup>
import bus from '@/utils/bus.js';
import { VueDraggable } from 'vue-draggable-plus';
import Drawertool from '@/components/Drawertool';
import volunteersStore from '@/store/modules/volunteerInfos';
import { ElMessage } from 'element-plus';
import { searchMajor } from '@/api/appv2/appv1.js';

import { watch, onMounted } from 'vue';
const emits = defineEmits([
  'changeInitialLoad',
  'universityInfo',
  'onClickShowMajors',
]);
onMounted(() => {
  console.log(props.listData, '==1===');
});
const drawertoolRef = ref(null);

const props = defineProps({
  listData: {
    type: Array,
    default: [],
  },
  // 是否全部展开/收起
  allUnfold: {
    type: Boolean,
    default: false,
  },
  // 是否展示所有专业
  allMajor: {
    type: Boolean,
    default: false,
  },
  // 是否显示录取率
  showChancelv: {
    type: Boolean,
    default: true,
  },
  currentSort: {
    type: String,
    default: '',
  },
  studentData: {
    type: Object,
    default: {},
  },
  status: {
    type: Number,
    default: 0,
  },
  //true禁止弹窗
  disableUniversityInfo: {
    type: Boolean,
    default: true,
  },
});
let newList = ref([]);
watch(
  () => props.listData,
  (newValue) => {
    console.log(newValue, '==2===', storeVolunteerInfos.value);
    newValue.forEach((item) => {
      storeVolunteerInfos.value.forEach((item1) => {
        if (item.collegeEnrollCode === item1.collegeEnrollCode) {
          newList.value.push(item);
        }
      });
    });
    console.log(newList.value, '过滤之后的数据');
  },
  { deep: true }
);

const volunteerStore = volunteersStore();
// 志愿表数据
const storeVolunteerInfos = computed(() => volunteerStore.volunteerInfos);
// 是否已填志愿表并返回填报的志愿表下标
function getFilledCollegeIndex(data) {
  return storeVolunteerInfos.value.findIndex((item) => item.id == data.id);
}
// 获取院校下已填报专业数量
function getFilledMajorNum(data) {
  let index = getFilledCollegeIndex(data);
  if (index >= 0) {
    return storeVolunteerInfos.value[index]?.majorsInfo?.length;
  }
}
// 判断是否填报专业并返回当前填报专业数量
function getFilledMajorIndex(data, major) {
  let fillIndex = getFilledCollegeIndex(data);

  let index = storeVolunteerInfos.value[fillIndex]?.majorsInfo?.findIndex(
    (item) => item.id == major.id
  );

  return index + 1;
}
const volunteerInfos = ref([]);
const equivalents = ref({});
// 展开查看专业列表的学校ID数组
const showMajorsSchoolIDs = ref([]);

// 只允许输入数字
const handleInput = (data) => {
  data.inputNum = data.inputNum.replace(/[^\d]/g, '');
};

const majorLeavel = ref('');
const fetcSearchMajor = (major) => {
  let data = {
    search: major.professionRealName,
    code: major.majorCode,
  };
  searchMajor(data).then((res) => {
    if (res.code == 20000) {
      majorLeavel.value = res.data[0].level;
      major.level = majorLeavel.value - 1;

      localStorage.setItem('student_id', props.studentData.studentId);
      drawertoolRef.value.handleChangeDrawer(true, '3-1');
      nextTick(() => {
        bus.emit('handleOpenMajorDet', major);
      });
    }
  });
};

// 大学名称点击
const handleScoolNameClick = (data) => {
  localStorage.setItem('student_id', props.studentData.studentId);
  drawertoolRef.value.handleChangeDrawer(true, '3', data);
};
// 大学下面的专业名称点击
const handleMajor = (major) => {
  fetcSearchMajor(major);
};
const isInitialLoad = ref(false);
// 监听 majorsInfo 的变化
watch(
  () => volunteerInfos.value.map((item) => item.majorsInfo),
  (newValue, oldValue) => {
    if (oldValue.length) {
      isInitialLoad.value = true;
      emits('changeInitialLoad', isInitialLoad.value);
    }
  },
  { deep: true }
);
const noData = (type) => {
  if (!type) {
    return '';
  } else {
    return type + '/';
  }
};
const natureTypeFun = (type) => {
  console.log('aaaaa', volunteerInfos.value);

  if (type == 'public') {
    return '公办';
  } else if (type == 'private') {
    return '民办';
  } else {
    return '中外合作办学';
  }
};
// 点击填报按钮 data:学校数据  major:专业数据
function onClickTianbao(data, major) {
  if (data.isFit == 1) {
    let fillIndex = getFilledCollegeIndex(data);

    let volunteerInfo = volunteerInfos.value;
    if (volunteerInfo.length > 0) {
      if (fillIndex > -1) {
        //如果有  点击了专业的时候  可以获取到唯一值 sid_sg_name   将其进行查找  如果没有就push 如果有就删除
        const index = volunteerInfos.value[fillIndex].majorsInfo.findIndex(
          (item) =>
            item.groupCode +
              item.professionEnrollCode +
              item.collegeCode +
              item.collegeEnrollCode +
              item.majorCode ===
            major.groupCode +
              major.professionEnrollCode +
              major.collegeCode +
              major.collegeEnrollCode +
              major.majorCode
        );
        if (index > -1) {
          if (volunteerInfos.value[fillIndex].majorsInfo.length == 1) {
            ElMessage.warning('至少选择一个专业');
          } else {
            volunteerInfos.value[fillIndex].majorsInfo.splice(index, 1);
          }
        } else {
          volunteerInfos.value[fillIndex].majorsInfo.push(major);
        }
      } else {
        let collegeData = JSON.parse(JSON.stringify(data));
        collegeData.majorsInfo = [major];
        volunteerInfos.value.push(collegeData);
      }
    } else {
      let collegeData = JSON.parse(JSON.stringify(data));
      collegeData.majorsInfo = [major];
      volunteerInfos.value.push(collegeData);
    }
    volunteerStore.setVolunteerInfos(
      JSON.parse(JSON.stringify(volunteerInfos.value))
    );
  } else {
    return;
  }
}

// 监听一键展开收起allUnfold 和 所有专业的展开收起allMajor
watch(
  () => [props.allMajor, props.allUnfold], // 同时监听 allMajor 和 allUnfold
  ([newAllMajor, newAllUnfold]) => {
    // 每次回调开始时，清空 showMajorsSchoolIDs
    showMajorsSchoolIDs.value = [];

    // 如果 allMajor 为 true，则显示院校所有的专业
    if (newAllMajor) {
      // 判断是否需要将 collegeCode 添加到 code 中
      // const shouldAddToCode = volunteerInfos.value.some(
      //   (item) => item.allMajorsList?.length !== item.majorsNum
      // );

      // 如果需要添加 collegeCode
      // if (shouldAddToCode) {
      const code = [
        ...new Set(
          volunteerInfos.value
            .filter((item) => item.allMajorsList?.length !== item.majorsNum) // 过滤出需要添加的项
            .map((item) => item.collegeCode) // 提取 collegeCode
        ),
      ];
      emits(
        'onClickShowMajors',
        volunteerInfos.value[0].batch,
        code,
        null,
        null
      );
      // } else {
      //   console.log('所有项的 allMajorsList 长度与 majorsNum 相等，无需操作');
      // }
    }

    // 如果 allUnfold 为 true，则展开所有专业
    if (newAllUnfold) {
      volunteerInfos.value.forEach((item) => {
        showMajorsSchoolIDs.value.push(item.id);
      });
    }

    // 如果 allMajor 和 allUnfold 都为 true，则显示院校所有的专业并展开所有专业
    if (newAllMajor && newAllUnfold) {
      showMajorsSchoolIDs.value = [];
      // 将 storeVolunteerInfos.value 中的每一项的 id 推送到 showMajorsSchoolIDs.value
      storeVolunteerInfos.value.forEach((item) => {
        showMajorsSchoolIDs.value.push(item.id);
      });
      return; // 直接返回，避免执行后续逻辑
    }
  },
  { immediate: true } // 可选：是否立即执行一次
);

watch(
  () => storeVolunteerInfos.value,
  (newVal) => {
    if (newVal) {
      volunteerInfos.value = newVal;
      equivalents.value = JSON.parse(localStorage.getItem('equivalents'));
      if (
        equivalents.value.length > 0 ||
        Object.keys(equivalents.value).length !== 0
      ) {
        for (const v of volunteerInfos.value) {
          for (const vv of v.moreYear) {
            if (equivalents.value[vv.year]?.eqRank) {
              if (!!vv.minRank && vv.minRank !== 0 && vv.minRank !== '-') {
                // equivalentBitDifference 等效位差
                vv.equivalentBitDifference =
                  vv.minRank - equivalents.value[vv.year].eqRank;
              } else {
                vv.equivalentBitDifference = '-';
              }
            } else {
              vv.equivalentBitDifference = '-';
            }
          }
          for (const vv of v.majorsInfo) {
            for (const vvv of vv.moreYear) {
              if (equivalents.value[vvv.year]?.eqRank) {
                if (!!vvv.minRank && vvv.minRank !== 0 && vvv.minRank !== '-') {
                  vvv.equivalentBitDifference =
                    vvv.minRank - equivalents.value[vvv.year].eqRank;
                } else {
                  vvv.equivalentBitDifference = '-';
                }
              } else {
                vvv.equivalentBitDifference = '-';
              }
            }
          }
          if (v.allMajorsList) {
            for (const vv of v.allMajorsList) {
              for (const vvv of vv.moreYear) {
                if (equivalents.value[vvv.year]?.eqRank) {
                  if (
                    !!vvv.minRank &&
                    vvv.minRank !== 0 &&
                    vvv.minRank !== '-'
                  ) {
                    vvv.equivalentBitDifference =
                      vvv.minRank - equivalents.value[vvv.year].eqRank;
                  } else {
                    vvv.equivalentBitDifference = '-';
                  }
                } else {
                  vvv.equivalentBitDifference = '-';
                }
              }
            }
          }
        }
      }
    }
  },
  { immediate: true }
);

// 拖拽结束
function draggableEnd() {
  volunteerStore.setVolunteerInfos(volunteerInfos.value);
}

/**
 * 点击调整志愿表序号
 * @param {Number} inputNum 调整到序号数
 * @param {Number} index 院校下标
 */
function onClickInputChange(inputNum, index) {
  if (inputNum <= 0) {
    ElMessage({
      message: '志愿序号不得小于1',
      type: 'warning',
    });
  } else if (inputNum > volunteerInfos.value.length) {
    ElMessage({
      message: '当前志愿序号不得超过志愿个数',
      type: 'warning',
    });
  } else {
    let moveVolunteer = volunteerInfos.value[index];

    if (inputNum <= index) {
      for (let i = index; i > inputNum - 1; i--) {
        volunteerInfos.value[i] = volunteerInfos.value[i - 1];
      }

      volunteerInfos.value[inputNum - 1] = moveVolunteer;
    } else {
      for (let i = index; i < inputNum; i++) {
        volunteerInfos.value[i] = volunteerInfos.value[i + 1];
      }

      volunteerInfos.value[inputNum - 1] = moveVolunteer;
    }
  }
}

// 点击展开收起专业列表
function onClickShowMajors(data, i) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  if (index >= 0) {
    showMajorsSchoolIDs.value.splice(index, 1);
  } else {
    showMajorsSchoolIDs.value.push(data.id);
    if (props.allMajor && !data.allMajorsList) {
      emits('onClickShowMajors', data.batch, data.collegeCode, data.id, i);
    }
  }
}

// 是否展开专业列表
function isShowMajors(data) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  return index >= 0;
}

// 点击删除填报的院校
function onClickDeleteCollege(index) {
  if (volunteerInfos.value.length == 1) {
    ElMessage({
      message: '请至少保留一个志愿！！！',
      type: 'warning',
    });
    return;
  }
  volunteerInfos.value.splice(index, 1);
  volunteerStore.setVolunteerInfos(volunteerInfos.value);
}

/**
 * 点击删除填报的院校专业
 * @param Number index 志愿表中院校下标
 * @param Number majorIdx 院校下专业下标
 */
function onClickDeleteMajor(index, majorIdx) {
  if (volunteerInfos.value[index].majorsInfo.length <= 1) {
    ElMessage({
      message: '请至少保留一个专业',
      type: 'warning',
    });
    return;
  }

  volunteerInfos.value[index].majorsInfo.splice(majorIdx, 1);
  volunteerStore.setVolunteerInfos(volunteerInfos.value);
}
const universityInfo = (data, isMajor) => {
  emits('universityInfo', data, isMajor);
};
</script>
<style lang="scss" scoped>
.disableUni {
  pointer-events: none;
  cursor: default;
}
.ghost {
  opacity: 0.04;
  background: #000 !important;
}

.schoolList {
  display: flex;
  flex-direction: column;
  border-right: none;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e5e6eb;

  .schoolList-look-button {
    color: #165dff;
    width: 90px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  .schoolList-look-button.select {
    color: white;
    background-color: #165dff;
  }

  .schoolList-grade {
    display: flex;

    .schoolList-grade-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .schoolList-grade-size {
        height: 25%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
      }

      .schoolList-grade-size-number {
        height: 25%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
        padding-left: 10px;
      }

      .schoolList-grade-size-icon {
        align-items: center;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .schoolList-people {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 18px 0;
    border-right: 1px solid #e5e6eb;

    .schoolList-Number {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #1d2129;
      line-height: 24px;
    }

    .schoolList-title {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 1.5;
    }
  }

  .schoolList-Center {
    min-width: 100px;
    margin-bottom: 10px;

    .schoolName {
      font-size: 18px;
      font-weight: 500;
      color: #1d2129;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolName-size {
      font-size: 14px;
      font-weight: 400;
      color: #1d212c;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolList-size {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 24px;
      display: flex;
      margin-left: 20px;
      align-items: center;

      .mseLevel {
        background-color: #fbe6e8;
        padding: 2px 4px;
        font-size: 10px;
        color: #f54f4a;
      }
    }

    .schoolList-bottom {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      .schoolList-bottom-size {
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #bcc3cc;
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
        padding: 0 4px;
        margin: 0 4px;
      }
    }
  }

  .schoolList-sequence {
    width: 80px;
    padding-left: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .schoolList-Left {
    width: 115px;
    padding-left: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-right: 1px solid #f2f3f5;

    .schoolList-Left-chance {
      font-size: 30px;
    }

    .schoolList-Left-size {
      text-align: left;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #86909c;
      line-height: 12px;
      margin-top: 10px;
    }

    .schoolList-Left-number {
      width: 20px;
      height: 20px;
      // background-color: #F53F3F;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

.chance1 {
  background-color: #f53f3f;
}

.chance2 {
  background-color: #ff8c33;
}

.chance3 {
  background-color: #00bf10;
}
</style>
